import { Link } from 'react-scroll';

import { useCreateOrderModal } from '@/entities/course';
import { BackButton } from '@/features/BackButton';
import { innerUrls } from '@/shared/constants';
import { PageBlock } from '@/shared/interfaces';
import { CourseDto } from '@/shared/interfaces/generated';
import { getImageUrl, transformArrayIntoObject } from '@/shared/lib';
import { usePrevRouter } from '@/shared/lib/hooks/usePrevRouter';
import { makeMockArray } from '@/shared/lib/transformArrayIntoObject';
import { Button, ButtonVariants, Loader } from '@/shared/ui';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { useIsClient } from 'usehooks-ts';

import cs from './ActionCard.module.scss';

export const ActionCard = ({
  actions,
  blocks,
  course,
  isFetching,
  isSuccess,
}: {
  blocks: PageBlock[];
  actions?: React.ReactNode;
  course: CourseDto;
  isFetching?: boolean;
  isSuccess?: boolean;
}) => {
  const isClient = useIsClient();
  const router = useRouter();
  const id = router.query.id as string;
  const { handleBuy } = useCreateOrderModal(id);
  const prevRouter = usePrevRouter();
  const backLink = (() => {
    if (prevRouter?.pathname?.startsWith(innerUrls.company('[id]'))) return prevRouter?.asPath;
    if (prevRouter?.pathname?.startsWith(innerUrls.catalog)) return prevRouter?.asPath;
    return innerUrls.catalog;
  })();
  return (
    <>
      <div className={cs.floating_card}>
        <BackButton
          className={cs.back_button}
          defaultBackLink={backLink}
          text={prevRouter?.pathname?.startsWith(innerUrls.company('[id]')) ? 'Компания' : 'Учимся'}
        />
        <div className={cs.card_image}>
          {!!course?.product.image && isSuccess && (
            <Image
              alt={course?.product.title}
              fill
              priority
              sizes="(max-width: 768px) 100vw, (max-width: 1024px) 100vw, (max-width: 1366px) 35vw, 45vw"
              src={getImageUrl(course?.product.image)}
            />
          )}
        </div>
        <div className={cs.card_buttons}>
          {!isFetching && isSuccess && course && blocks?.length
            ? blocks
                .filter((item) => item.body && item.id !== 'speakers')
                .map(({ id, title }) => (
                  <Link className={cs.card_button} duration={100} key={id} offset={-120} smooth to={id}>
                    {title}
                  </Link>
                ))
            : makeMockArray(3).map(({ id: index }) => (
                <div className={cs.card_button} key={index}>
                  <Loader borderRadius={12} height={26} />
                </div>
              ))}
        </div>
        <div className={cs.card_actions}>
          <BackButton
            className={cs.back_mobile}
            defaultBackLink={backLink}
            text={prevRouter?.pathname?.startsWith(innerUrls.company('[id]')) ? 'Компания' : 'Учимся'}
          />
          <div className={cs.card_action_props}>{isClient && actions}</div>
        </div>
      </div>
      <Button
        className={cs.buy_button}
        data-testid="button-modal_create_order"
        onClick={handleBuy}
        variant={ButtonVariants.Primary}
      >
        {course && (
          <span className={cs.price_current}>
            Купить за {(course?.product.discountPrice ?? course?.product.price)?.toLocaleString()} ₽{' '}
          </span>
        )}
        {course?.product.discountPrice !== null && course?.product.discountPrice !== undefined && (
          <span className={cs.price_old}>{course?.product.price.toLocaleString()} ₽</span>
        )}
      </Button>
    </>
  );
};
